<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.operate_id" placeholder="店内员工">
                        <el-option v-for="staff in staffList" :key="staff.user_id" :label="staff.name" :value="staff.user_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="提成类型">
                        <el-option v-for="item in getType" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input  v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>


                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 时间	提成金额	员工姓名	场次金额	服务金额	提成基准	提成类型	提成百分比	关联订单或场次 -->
                <el-table-column prop="open_room_time" label="时间" fixed width="240"></el-table-column>
                <el-table-column prop="percent_price" label="提成金额"></el-table-column>
                <el-table-column prop="operate_name" label="员工姓名"></el-table-column>
                <el-table-column prop="sum_total_price" label="场次金额"></el-table-column>                
                <el-table-column prop="total_price" label="服务金额"> </el-table-column>
                <el-table-column prop="step_price" label="提成基准"></el-table-column>
                <el-table-column prop="type_cn" label="提成类型"></el-table-column>
                <el-table-column prop="step_percent" label="提成百分比"> </el-table-column>
                <el-table-column prop="stage" label="关联订单或场次" width="240">
                    <template slot-scope="scope">
                        <p v-if="scope.row.type==1">{{scope.row.stage_id}}</p>
                        <p v-else>{{scope.row.order_id}}</p>
                    </template>
                </el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 



export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:'1'

            },
            
            staffList:[],
            timerange:[],
            getType:[
                {status:'2',status_cn:"VIP充值"},
                {status:'1',status_cn:"批次提成"},
            ],
            
            
        }
    },
    mounted(){
        var that = this;
        that.getList();
        abc.getStaff(that)
    },
    
    methods:{
        search(){
            const that = this;
            console.log(that.timerange)
            if(that.timerange == null){
                that.timerange = ['','']
            }else if(that.timerange.length == 0){
                that.timerange = ['','']
            }
            that.form.start_time = that.timerange[0];
            that.form.end_time = that.timerange[1];
            that.getList()
        },         
        changePage(val){
            var that = this;
            console.log(that.form)
            that.pageNum = val;
            that.form.page = val;
            that.getList()
        },
        getList(){
            let that = this;
            abc.get(that,potUrl.waiterpercentagelist,that.form,(res)=>{
                that.total = res.data.total
                that.tableData =  res.data.list
            });//列表
        },

    }
}

</script>